<template >
  <div id="city">
    <div class="head">
      <router-link class="return" to='/'><img src="../assets/return.png"></router-link>
      <span>选择城市</span>
      <div>
        <router-link class="homepage" to = '/'>
          <img src="../assets/homepage.png">
          <span>首页</span>
        </router-link>
        <router-link class="search" to="search">
          <img src="../assets/search.png">
          <span>搜索</span>
        </router-link>
      </div>
    </div>
    <div class="body">
      <div class="locatingcity">
        <span>定位城市:</span>{{locatingcity}}
      </div>
      <div class="recents">
        <span>最近访问</span>
        <ul class="recentcity table">
          <li v-for= 'd in recentcity' :key='d.label'>{{d.name }}</li>
        </ul>
      </div>
      <div class="hot">
        <span>热门城市</span>
        <ul class="hotcity table">
          <li v-for= 'd in hotcity' :key='d.label'>{{d.name }}</li>
        </ul>
      </div>
      <div class="all">
        <span>全部城市</span>
        <ul class="allcity table">
          <li v-for= '(d, index) in allcity' :key='d.label' @click="selectCity(d, index)">
            {{d.name}}
          </li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <div class="footer-bar">
        <button class="login" @click="login">登录</button>
        <button class="register" @click="register">注册</button>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;城市:</span>
        <button class="location" @click="citys">西安</button>
      </div>
      <ul class="footer-nav">
        <li>
          <a class="react" @click="homepage">首页</a>
        </li>
        <li>|</li>
        <li><a class="react" @click="login">我的</a>
        </li>
        <li>|</li>
        <li><a class="react"  href="//i.meituan.com/client" data-source="(direct)">美团下载</a>
        </li>
        <li>|</li>
        <li><a class="react" href="//www.meituan.com?pcstyle=1">电脑版</a>
        </li>
        <li>|</li>
        <li><a class="react" @click="helps">帮助</a>
        </li>
      </ul>
      <div class="footer-links">友情链接：
        <a href="//m.maoyan.com/?channel=touch_group">猫眼电影</a>
        <a  href="//m.dianping.com">大众点评</a>
        <a href="https://i.meituan.com/awp/hfe/hotel-fe-itower_awp/journey/guide-download/index.html?refer_source=yqlj">美团旅行</a>
        <a href="//i.zhenguo.com" class="linkminsu">榛果民宿</a>
        <a href="//evt.dianping.com/synthesislink/9496.html">大众点评下载</a>
        <a href="https://xue.meituan.com/?from=mt0" class="linkschool">美团点评餐饮学院</a>
        <a href="https://i.meituan.com/awp/hfe/block/6c4bec785dce/11188/index.html">快驴进货商家合作</a>
      </div>
      <div class="footer-copyright">
        <div class="hr"></div>
        <span class="footer-copyright-text">©2018 美团网 <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">京ICP证070791号</a></span>
      </div>
    </div>
  </div>
</template>
<script>
const ERR_OK = 0
export default {
  name: 'city',
  data () {
    return {
      firstColor: {
        color: '#fdb338'
      },
      locatingcity: '定位失败,请手动选择',
      recentcity: [
        {'label': '北京Beijing010', 'name': '北京', 'pinyin': 'Beijing', 'zip': '010'},
        {'label': '重庆Chongqing023', 'name': '重庆', 'pinyin': 'Chongqing', 'zip': '023'}],
      hotcity: [
        {'label': '北京Beijing010', 'name': '北京', 'pinyin': 'Beijing', 'zip': '010'},
        {'label': '重庆Chongqing023', 'name': '重庆', 'pinyin': 'Chongqing', 'zip': '023'}],
      allcity: [
        {'label': '北京Beijing010', 'name': '北京', 'pinyin': 'Beijing', 'zip': '010'},
        {'label': '重庆Chongqing023', 'name': '重庆', 'pinyin': 'Chongqing', 'zip': '023'},
        {'label': '上海Shanghai021', 'name': '上海', 'pinyin': 'Shanghai', 'zip': '021'},
        {'label': '天津Tianjin022', 'name': '天津', 'pinyin': 'Tianjin', 'zip': '022'},
        {'label': '长春Changchun0431', 'name': '长春', 'pinyin': 'Changchun', 'zip': '0431'},
        {'label': '长沙Changsha0731', 'name': '长沙', 'pinyin': 'Changsha', 'zip': '0731'},
        {'label': '常州Changzhou0519', 'name': '常州', 'pinyin': 'Changzhou', 'zip': '0519'},
        {'label': '福州Fuzhou0591', 'name': '福州', 'pinyin': 'Fuzhou', 'zip': '0591'},
        {'label': '广州Guangzhou020', 'name': '广州', 'pinyin': 'Guangzhou', 'zip': '020'},
        {'label': '贵阳Guiyang0851', 'name': '贵阳', 'pinyin': 'Guiyang', 'zip': '0851'},
        {'label': '成都Chengdu028', 'name': '成都', 'pinyin': 'Chengdu', 'zip': '028'},
        {'label': '大连Dalian0411', 'name': '大连', 'pinyin': 'Dalian', 'zip': '0411'},
        {'label': '东莞Dongguan0769', 'name': '东莞', 'pinyin': 'Dongguan', 'zip': '0769'},
        {'label': '佛山Foshan0757', 'name': '佛山', 'pinyin': 'Foshan', 'zip': '0757'},
        {'label': '哈尔滨Haerbin0451', 'name': '哈尔滨', 'pinyin': 'Haerbin', 'zip': '0451'},
        {'label': '海口Haikou0898', 'name': '海口', 'pinyin': 'Haikou', 'zip': '0898'},
        {'label': '邯郸Handan0310', 'name': '邯郸', 'pinyin': 'Handan', 'zip': '0310'},
        {'label': '杭州Hangzhou0571', 'name': '杭州', 'pinyin': 'Hangzhou', 'zip': '0571'}

      ]
    }
  },
  created () {
    this.$http.get('../static/city.json').then((response) => {
      response = response.body
      if (response.errno === ERR_OK) {
        this.d = response.data
        alert(response.data)
      }
    })
  },
  methods: {
    selectCity (city, index) {
      console.log(index + '====', JSON.stringify(city))
    },
    login () {
      this.$router.push('mine')
    },
    register () {
      this.$router.push('login')
    },
    citys () {
      this.$router.push('city')
    },
    homepage () {
      this.$router.push('/')
    },
    helps () {
      this.$router.push('help')
    },
    lastBorder () {

    }
  }
}
</script>

<style scoped lang="scss">
 *{
   margin: 0;
   padding: 0;
 }
 #city{
   width: 6.4rem;
   overflow: hidden;
   word-break: break-all;
   word-wrap: break-word;
   margin: 0 auto;
 }
 .head{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    margin: 0 ;
    padding: 0;
    width: 100%;
    height: 1rem;
    background-color: #06c1ae;
    border-bottom: 1px solid #21897d;
   .return{
     img{
       display: block;
       width: .5rem;
       height: .5rem;
       margin: .25rem 0 .25rem 0.15rem ;
     }
   }
    span{
      font-size: .4rem;
      line-height: 1rem;
      color: #fff;
    }
    div{
     display: flex;
     justify-content: space-around;
      .homepage,.search{
       display: flex;
       flex-direction: column;
       width: .6rem;
       margin: 0 .2rem;
        img{
          display: block;
          margin: .1rem 0 0 .08rem;
          width: .45rem;
          height: .45rem;
          align-items: center;
        }
        span{
          font-size: .25rem;
          line-height: .4rem;
          text-align: center;
        }
     }
   }
  }
 .body{
    background-color: #f0efed;
    width: 6rem;
    padding: .2rem;
   .locatingcity{
     margin-bottom: .2rem;
     padding: .2rem;
     height: .5rem;
     border: 1px solid #ddd8ce;
     font-size: .3rem;
     background-color: #fff;
     line-height: .5rem;
     color: #666;
     span{
       color: #333;
       padding-right: .1rem;
     }
   }
   .recents,.hot,.all{
     span{
       display: block;
       padding: .2rem 0;
       font-size: .4rem;
     }
     .table{
       border: 1px solid #ddd8ce;
       font-size: .3rem;
       background-color: #fff;
       line-height: .5rem;
       color: #666;
       box-sizing: border-box;
       display: flex;
       flex-flow: wrap;
       min-height: .8rem;
       position: relative;
       overflow: hidden;
       z-index: 0;
       ::before {
         content: '';
         position: absolute;
         width: 25%;
         left: 25%;
         height: 100%;
         border-left: 1px solid #ddd8ce;
         border-right: 1px solid #ddd8ce;
         z-index: 0;
       }
       ::after {
         content: '';
         position: absolute;
         width: 25%;
         right: 0;
         height: 100%;
         border-left: 1px solid #ddd8ce;
       }
       li{
         box-sizing: border-box;
         display:inline-block;
         width: 25%;
         height: 100%;
         line-height: .9rem;
         font-size: .35rem;
         float: left;
         text-align: center;
       }
     }
     .allcity li{
       border-bottom: 1px solid #ddd8ce;
     }
     .allcity li:nth-last-child(1){
       border-bottom: none;
     }
     .allcity li:nth-last-child(2){
       border-bottom: none;
     }
   }
  }
 .footer{
   height: 3.6rem;
   width: 6rem;
   margin: 0 auto;
   padding: .2rem;
   background-color: #f0efed;
   .footer-bar {
     font-size: .25rem;
     margin-bottom: .4rem;
     display: flex;
     justify-content: space-between;
     button{
       display: inline-block;
       width: 1.2rem;
       height: .6rem;
       border-radius: .06rem;
       font-size: .28rem;
       vertical-align: middle;
       line-height: .6rem;
       cursor: pointer;
       border: .02rem solid #06c1ae;
       padding: 0 .3rem;
       background: 0;
       color: #06c1ae;
     }
     .location{
       width: 1.8rem;
     }
     span{
       width: 1.2rem;
       text-align: center;
       line-height: .6rem;
       font-size: .3rem;
     }
   }
   .footer-nav{
     margin: 0;
     padding: .18rem 0;
     font-size: .22rem;
     display: flex;
     flex-direction:row;
     flex-wrap: nowrap;
     white-space: nowrap;
     justify-content: center;
     li{
       .line{
         color: black;
         line-height: 1.2rem;
       }
       a{
         display: block;
         height: 100%;
         overflow-x: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         padding: 0 .25rem;
         color: #06c1ae;
       }
     }
   }
   .footer-links{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
     font-size: .24rem;
     margin: .3rem .2rem 0 .2rem;
     text-align: center;
     a{
       display: block;
       color: #06c1ae;
       font-size: .24rem;
       padding: 0 .2rem .1rem .3rem;
       text-align: center;
     }
     .linkminsu{
       margin: 0 0 0 .5rem;
     }
     .linkschool{
       margin: 0 0 0 .5rem;
     }
   }
   .footer-copyright {
     font-size: .05rem;
     text-align: center;
     position: relative;
     .hr {
       display: block;
       content: "";
       width: 100%;
       position: absolute;
       top: 50%;
       border-top: 1px solid #999;
       z-index: 2;
     }
     .footer-copyright-text {
       position: relative;
       width: 4rem;
       margin: 0 auto;
       color: #999;
       background-color: #f0efed;
       font-size: .05rem;
       display: flex;
       justify-content: center;
       z-index: 3;
       a{
         display: block;
         font-size: .05rem;
         color: #999;
       }
     }
   }
 }
</style>
